<script setup>
import { ref } from 'vue'

// 统计数据
const studentCount = ref(1284)
const courseCount = ref(48)
const storageUsed = ref(128)
const unreadMessages = ref(17)

// 最近活动数据
const recentActivities = [
  { id: 1, student: '张三', course: '数学分析', action: '提交了作业', time: '10分钟前', status: 'success' },
  { id: 2, student: '李四', course: '线性代数', action: '查看了成绩', time: '30分钟前', status: 'info' },
  { id: 3, student: '王五', course: '大学物理', action: '提出了问题', time: '1小时前', status: 'warning' },
  { id: 4, student: '赵六', course: '程序设计', action: '下载了资料', time: '2小时前', status: 'info' },
  { id: 5, student: '钱七', course: '英语阅读', action: '完成了测验', time: '3小时前', status: 'success' }
]
</script>

<template>
  <div class="dashboard-container">
    <!-- 统计卡片 -->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-info">
              <p class="stat-label">学生总数</p>
              <el-statistic
                :value="studentCount"
                :precision="0"
                class="stat-value"
              ></el-statistic>
              <p class="stat-change">+6.2% 较上月</p>
            </div>
            <div class="stat-icon">
              <el-avatar icon="User" size="large" class="avatar-blue"></el-avatar>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-info">
              <p class="stat-label">课程数量</p>
              <el-statistic
                :value="courseCount"
                :precision="0"
                class="stat-value"
              ></el-statistic>
              <p class="stat-change">+3.5% 较上月</p>
            </div>
            <div class="stat-icon">
              <el-avatar icon="Reading" size="large" class="avatar-green"></el-avatar>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-info">
              <p class="stat-label">云盘存储</p>
              <el-statistic
                :value="storageUsed"
                :precision="0"
                suffix="GB"
                class="stat-value"
              ></el-statistic>
              <p class="stat-change">+12.3% 较上月</p>
            </div>
            <div class="stat-icon">
              <el-avatar icon="Folder" size="large" class="avatar-orange"></el-avatar>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-info">
              <p class="stat-label">未读消息</p>
              <el-statistic
                :value="unreadMessages"
                :precision="0"
                class="stat-value"
              ></el-statistic>
              <p class="stat-change">+2 较昨日</p>
            </div>
            <div class="stat-icon">
              <el-avatar icon="Message" size="large" class="avatar-red"></el-avatar>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 最近活动 -->
    <el-row :gutter="20" class="activity-row">
      <el-col :span="16">
        <el-card class="activity-card">
          <template #header>
            <div class="card-header">
              <span>最近活动</span>
            </div>
          </template>
          <el-table :data="recentActivities" style="width: 100%">
            <el-table-column prop="student" label="学生" width="100"></el-table-column>
            <el-table-column prop="course" label="课程" width="120"></el-table-column>
            <el-table-column prop="action" label="操作" width="120"></el-table-column>
            <el-table-column prop="time" label="时间" width="100"></el-table-column>
            <el-table-column prop="status" label="状态" width="80">
              <template #default="scope">
                <el-tag
                  :type="scope.row.status === 'success' ? 'success' : scope.row.status === 'warning' ? 'warning' : 'info'"
                  size="small"
                >
                  {{ scope.row.status === 'success' ? '成功' : scope.row.status === 'warning' ? '警告' : '信息' }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="progress-card">
          <template #header>
            <div class="card-header">
              <span>任务进度</span>
            </div>
          </template>
          <div class="progress-item">
            <div class="progress-info">
              <span class="progress-name">课程开发</span>
              <span class="progress-percent">75%</span>
            </div>
            <el-progress :percentage="75" color="#4096ff"></el-progress>
          </div>
          <div class="progress-item">
            <div class="progress-info">
              <span class="progress-name">学生评估</span>
              <span class="progress-percent">60%</span>
            </div>
            <el-progress :percentage="60" color="#20c997"></el-progress>
          </div>
          <div class="progress-item">
            <div class="progress-info">
              <span class="progress-name">系统维护</span>
              <span class="progress-percent">90%</span>
            </div>
            <el-progress :percentage="90" color="#f7ba1e"></el-progress>
          </div>
          <div class="progress-item">
            <div class="progress-info">
              <span class="progress-name">数据分析</span>
              <span class="progress-percent">45%</span>
            </div>
            <el-progress :percentage="45" color="#ff7d00"></el-progress>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
/* 仪表盘容器样式 */
.dashboard-container {
  padding: 20px 0;
}

/* 统计卡片样式 */
.stat-card {
  height: 100%;
}

.stat-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
}

.stat-info {
  flex: 1;
}

.stat-label {
  font-size: 14px;
  color: #86909c;
  margin-bottom: 5px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #1d2129;
}

.stat-change {
  font-size: 12px;
  color: #20c997;
  margin-top: 5px;
}

.stat-icon {
  margin-left: 15px;
}

.avatar-blue {
  background-color: rgba(64, 154, 255, 0.2);
  color: #4096ff;
}

.avatar-green {
  background-color: rgba(32, 201, 151, 0.2);
  color: #20c997;
}

.avatar-orange {
  background-color: rgba(255, 125, 0, 0.2);
  color: #ff7d00;
}

.avatar-red {
  background-color: rgba(245, 108, 108, 0.2);
  color: #f56c6c;
}

/* 图表行样式 */
.chart-row {
  margin-top: 20px;
}

.chart-card {
  height: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header-btns {
  display: flex;
}

.chart-content {
  padding: 20px 0;
}

/* 活动行样式 */
.activity-row {
  margin-top: 20px;
}

.activity-card {
  height: 100%;
}

.progress-card {
  height: 100%;
}

.progress-item {
  margin-bottom: 15px;
}

.progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.progress-name {
  font-size: 14px;
  color: #1d2129;
}

.progress-percent {
  font-size: 14px;
  color: #86909c;
}
</style>